import React, { memo, useState, useEffect } from "react";
import { CoverMaskStyle } from "./style";

export default memo(function CoverMask(props) {
  const closeWindow = () => {
    props.close();
  };

  return props.open ? (
    <CoverMaskStyle>
      <div className="beVip">
        <div className="beVipTitle">
          <span>开通会员</span>
          <i onClick={closeWindow} className="closeWindow"></i>
        </div>
        <div className="beVipContent">
          <p className="content-title">该资源为VIP专享，开通VIP畅听无阻</p>
          <div className="vipQ">
            <h3>VIP尊享</h3>
            <ul>
              <li>
                <img
                  src="https://nos.netease.com/yyimgs/xHGdjp4ZZW96of8vh0zkTQ==/109951164007422212"
                  alt=""
                />
                <p>VIP专属曲库</p>
              </li>
              <li>
                <img
                  src="https://nos.netease.com/yyimgs/j6OF7Fd2jtOgS9C9n8Iyag==/109951164007429079"
                  alt=""
                />
                <p>千万歌曲免费下载</p>
              </li>
              <li>
                <img
                  src="https://nos.netease.com/yyimgs/urnT1sEsA6aUXPPpVmBVgQ==/109951164000648486"
                  alt=""
                />
                <p>无损音质</p>
              </li>
            </ul>
          </div>
          <div className="newGold">新客2.8元开通</div>
          <div className="onlyBuy">
            <span>仅购买此曲</span>&nbsp;&nbsp;&nbsp;&gt;
          </div>
        </div>
      </div>
    </CoverMaskStyle>
  ) : (
    <React.Fragment></React.Fragment>
  );
});
